<!-- xxx功能2 -->
<template>
  <div id="function2">
    <div class="content-scroll">
      <SmallTitle :titleName="titleName"></SmallTitle>
      <div class="add-box">
        <Button type="success" @click="addInfor" class="add-btn">添加</Button>
      </div>
      <div class="search-box">
        <Input type="text" size="large" v-model="inputSearch" placeholder="请输入搜索信息" class="input-box"/>
        <Button type="success" @click="searchInfor" class="add-btn">搜索</Button>
      </div>
      <div class="table-box">
        <Table stripe border :columns="columnsData" :data="datas"></Table>
      </div>
    </div>
  </div>
</template>

<script>
import SmallTitle from '../../parts/SmallTitle'
export default {
  name: 'function2',
  components: {
    'SmallTitle': SmallTitle
  },
  data () {
    return {
      inputSearch: '',
      inputName: '',
      inputPhone: '',
      inputPassword: '',
      titleName: '我是一个功能function2',
      columnsData: [
        {title: 'ID', key: 'id'},
        {title: '回答内容', key: 'content'},
        {title: '发布时间', key: 'time'},
        {
          title: '操作',
          key: 'action',
          width: 130,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '10px'
                },
                on: {
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.removeInfor(params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      datas: [],
      userList: []
    }
  },
  computed: {
  },
  methods: {
    addInfor () {
      // if (this.inputName.length === 0) {
      //   this.$Message.error('用户名称不可为空!')
      // } else if (this.inputPhone.length === 0) {
      //   this.$Message.error('电话不可为空!')
      // } else if (this.inputPassword.length === 0) {
      //   this.$Message.error('密码不可为空!')
      // } else {
      //   this.datas.push({name: this.inputName, phone: this.inputPhone, password: this.inputPassword})
      //   this.$Message.success('添加用户成功!')
      //   this.inputName = ''
      //   this.inputPhone = ''
      //   this.inputPassword = ''
      // }
    },
    removeInfor (index) {
      this.datas.splice(index, 1)
    },
    searchInfor () {
      alert(this.inputSearch)
    }
  },
  created () {
    this.axios.get('/api/getAllAnswer')
      .then((response) => {
        this.userList = response.data.data
        for (var i of this.userList) {
          this.datas.push({id: i.id, content: i.content, time: i.time})
        }
        console.log(response)
      })
    // .catch((error) => {
    //   this.$Notice.error({
    //     title: '通知',
    //     desc: '接口，异常！'
    //   })
    //   console.info(error)
    // })
  }
}
</script>

<style scoped>
  /*@import '../../../../static/css/Parks.css';*/
  #function2 {
    height: 100%;
    width: auto;
  }

  .content-scroll {
    height: 100%;
    width: auto;
    overflow: scroll;
    overflow-x: auto;
    background-color: white;
  }

  .add-box {
    float: left;
    padding: 15px;
  }

  .search-box {
    float: right;
    padding: 15px;
  }

  .input-box {
    width: 200px;
    float: left;
    padding-right: 15px;
  }

  .add-btn  {
    height: 35px;
    float: left;
  }

  .table-box {
    height: auto;
    width: 100%;
    float: left;
    padding: 0 15px 15px 15px;
  }
</style>
